<template>
	<view class="content">
		<view class="search-wrap">
			<u-search placeholder="请输入小区名称" v-model="keyword" @change="$u.throttle(handleChange,$debounceTime,false)" :show-action="false"></u-search>
		</view>
		<view class="list-wrap">	
			<view class="list" v-for="(item,i) in list" :key="i"  @tap="handleLocationClick(i)">
				<view class="list-item">
					<image :src="icon" mode="widthFix"></image>
				</view>
				<view class="list-item">
					<view>{{item.title}}</view>
					<view>{{item.address}}</view>
				</view>
			</view>
			<no-data :src="noDataSrc" :txt="'未匹配到搜索结果'" v-if="list && list.length==0"></no-data>
		</view>
		<view class="bottom-safe-area"></view>
	</view>
</template>
<script>
	let QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	let qqmapsdk=null;
	export default {
		data() {
			return {
				currentCity:'',//当前城市
				//当前经纬度
				location: {
					latitude: '',
					longitude: '',
				},
				//搜索数据
				keyword:'',
				list:'',
				noDataSrc:this.$noData,
				icon:this.$imgUrl+'map/map-04.png',
			}
		},
		onLoad(options){
			//初始化qq位置服务
			qqmapsdk = new QQMapWX({
				key: 'S4BBZ-LI4KR-QZKWE-WFPGW-MQWPV-G5FJU'
			});
		},
		onShow() {
			this._isAuthorize();
		},
		
		methods:{
			//main data
			_getNearbyList(location) {
				let that = this;
				uni.showLoading({
				    title: '加载中...'
				});
				qqmapsdk.reverseGeocoder({
					location,
					get_poi: 1,
					poi_options: 'page_size=30;page_index=1',
					success: function(res) {
						uni.hideLoading();
						let pois = res.result.pois;
						let list=[];
						
						pois.forEach(item => {
							var json = {};
							json.title = item.title;
							json.address = item.address;
							json.location={
								latitude:item.location.lat,
								longitude:item.location.lng
							};
							list.push(json);	
						});
						that.list=list;
						//当前城市
						that.currentCity=res.result.address_component.city;
						
					},
					fail: function(res) {
						uni.hideLoading();
					},
				});
			},
			handleChange(){
				
				//verify
				let keyword=this.keyword;
				if (keyword == '' || /^\s+$/.test(keyword) || keyword == null) {
					this.list=[];
					return false;
				};
				let that = this;
				qqmapsdk.getSuggestion({
					keyword: that.keyword,
					region:that.currentCity,
					page_size:20,
					success: function(res) {
						let list = [];
						res.data.forEach((item) => {
							var json = {};
							json.title = item.title;
							json.address = item.address;
							json.location={
								latitude:item.location.lat,
								longitude:item.location.lng
							};
							list.push(json);				
						});
						that.list=list;
					},
				});
			},
			handleLocationClick(i){
				this.$u.debounce(()=>{this._locationClick(i)},this.$debounceTime,true)
			},
			_locationClick(i){
				
				let pages = getCurrentPages(); // 获取页面栈
				let prevPage = pages[pages.length - 2]; // 上一个页面
				prevPage.$vm.location = this.list[i].location;
				prevPage.$vm.keyword = this.list[i].title+'附近网点';
				
				// prevPage.$vm._hideLayer();
				// prevPage.$vm.getMapDataRequest(this.list[i].location);
				//uni.$emit('update',{keyword:this.list[i].title+'附近网点',location:this.list[i].location})
				uni.navigateBack();
				
			},
			//position
			_isAuthorize(){
				
				
				// #ifdef	MP-ALIPAY
				uni.getLocation({
					type: 'gcj02',
					success:res=>{
						this.location={
							longitude:res.longitude,
							latitude:res.latitude,
						};
						this._getNearbyList(this.location);
					}
				});
				// #endif
				
				//微信
				// #ifdef	MP-WEIXIN
				const that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() { 
						that._getLocation();
					},
					fail(){    
						that._openAuthorizeModal();
					}
				});
				// #endif
			},
			_getLocation(){  
				uni.getLocation({
					type: 'gcj02',
					success:res=>{
						this.location={
							longitude:res.longitude,
							latitude:res.latitude,
						};
						this._getNearbyList(this.location);
					}
				});
			},
			_openAuthorizeModal(){
				this.$utils.modal({
					title:'请求授权当前位置',
					content:'需要获取您的地理位置，请确认授权',
					callback:(bool)=>{
						if (bool) {
							uni.openSetting();
						}else{
							this.$utils.toast('您拒绝了授权，无法获得您的位置');
						}
					}
				});
			}
		},
	}
</script>
<style lang="scss" scoped>
	.search-wrap{
		padding:10px;
		background-color:#fff;
		height:52px;
		position:fixed;
		left:0;
		top:0;
		width:100%;
		box-sizing: border-box;
	}
	.list-wrap{
		padding:0 40rpx;
		padding-top: 52px;
	}
	.list{
		display: flex;
		align-items: center;
		padding-bottom:30rpx;
	}
	.list-item image{
		width:40rpx;
		height:40rpx;
	}
	.list-item view:nth-child(1){
		font-size:30rpx;
		color:#333;
		padding-bottom:14rpx;
		
	font-weight: bold;
	}
	.list-item view:nth-child(2){
		font-size:26rpx;
		color:#999;
	}
	.list-item:nth-child(1){
		margin-right: 20rpx;
	}
</style>